
<html id="test" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <title>Test</title>
	<script type="text/javascript" src="UIController.js"></script>
	<script type="text/javascript" src="MyJavaScript.js"></script>
	<script type="text/javascript" src="ComboBox.js"></script>
	<script type="text/javascript" src="Button.js"></script>
    <script type="text/javascript" src="TextArea.js"></script>
    <script type="text/javascript" src="ScrollPanel.js"></script>
    <script type="text/javascript" src="ScrollPanelEx.js"></script>
    <script type="text/javascript" src="ListArea.js"></script>
    <script type="text/javascript" src="Slider.js"></script>   	
	    
  </head>
  <body onload="initGlobals()"
    style="width:100%; height:100%"  
    onkeyup="return controller.onKeyUp();" 
    onKeyDown = "return controller.onKeyDown();" 
    onKeyPress = "controller.onKeyPress();">   
	<div> 
		<canvas id = 'canvas1' 
		        onclick = 'controller.onClick();' 
		        onmousedown = 'controller.onMouseDown();'
		        onmouseover = "controller.onMouseOver();"
		        onmouseup = "controller.onMouseUp();"
		        onmousemove = "controller.onMouseMove();"
		        onmouseout = "controller.onMouseOut();"
		        ondblclick="controller.onDoubleClick();"
		        width="400" height="400" 
		        style="border:1px solid red;">
		</canvas>	    	    	   
   	</div>
    
	<script type="text/javascript">	            
        function initGlobals()
		{
			try
			{
			    context = document.getElementById('canvas1').getContext('2d');
				controller = new UIController(context);

				var ta = new TextArea();
				ta.setfixedWidthCharacters(true);
				scroller = new ScrollPanel(context, 50, 25);
				scroller.setChild(ta);
				scroller.setWidth(200);
				scroller.setHeight(75);
				controller.registerPart(scroller);
                
                var cmd = new Button(context, 50, 110);
				cmd.setText("Test Button");
				cmd.setHeight(35);
				cmd.setWidth(200);
				cmd.onClick = function () { alert("Test Button Clicked"); }
                controller.registerPart(cmd);		
                				
                var cbo = new ComboBox(context, 50, 160);
				cbo.setList(["Joe", "Bob", "Ken"]);
				cbo.setWidth(200);
				controller.registerPart(cbo);
                				
				var lst = new ScrollPanel(context, 50, 200);
				lst.setWidth(200);
				lst.setHeight(75);
				lst.setChild(new ListArea());
				lst.getChild().setList(["Joe", "Bob", "Ken"]);
				lst.getChild().onSelectionChanged = function() { alert("list selection changed"); }				
				controller.registerPart(lst);

				var slider = new Slider(context, 42, 300);
				slider.setWidth(210);
				slider.setMinValue(1);                
				slider.setMaxValue(4);
				slider.setShowValue(true);
				slider.onValueChanged = function (p_value) { alert("Slider set to value: " + p_value); }
				controller.registerPart(slider);

				controller.render();
			}
			catch (exc) 
			{
				alert (exc);
			}
		}
					
	</script>
  </body>	
</html>
